import logo from "assets/svgs/logo.svg";
import { FC, useEffect, useState } from "react";
import "./css.scss";

const App: FC = () => {
  const [result, setResult] = useState<string>('');

  const handleCallHello = async () => {
    console.log('test:zuoyu:hello');
    const response = await window.electronAPI?.callHello();
    console.log('test:zuoyu:hello', response);
    setResult(response);
  };

  useEffect(() => {
    if (!window.electronAPI) return;

    window.electronAPI.send("HelloWorld");
    window.electronAPI.receive("HelloWorld", (_: Electron.IpcRendererEvent, result: any) => {
      console.log(result.message);

      window.electronAPI.removeAllListeners("HelloWorld");
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App/index.tsx</code> and save to reload.
        </p>
        <p>{result}</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button
          type="button"
          onClick={() => {
            console.log("Hello World");
            window.electronAPI?.send("HelloWorld");
          }}
        >
          Hello World button
        </button>
        {/* <button type="button" onClick={() => window.electronAPI?.send(addon.Hello())}>
          Hello World from c++ button
        </button> */}
        <button type="button" onClick={handleCallHello}>
          Hello World from c++ button
        </button>
      </header>
    </div>
  );
};

export default App;
